<template>
  <view class="container">
    <form @submit="formSubmit" @reset="formReset">
      <!-- 姓名输入项 -->
      <view class="uni-form-item uni-column">
        <view class="title">姓名</view>
        <label class="uni-label" for="nickname">请输入姓名</label>
        <input class="uni-input" id="nickname" name="nickname" placeholder="请输入姓名" />
      </view>

      <!-- 性别单选项 -->
      <view class="uni-form-item uni-column">
        <view class="title">性别</view>
        <radio-group name="gender">
          <label class="radio-item" for="male">
            <radio id="male" value="男" />男
          </label>
          <label class="radio-item" for="female">
            <radio id="female" value="女" />女
          </label>
        </radio-group>
      </view>

      <!-- 爱好复选框项 -->
      <view class="uni-form-item uni-column">
        <view class="title">爱好</view>
        <checkbox-group name="loves">
          <label class="checkbox-item" for="read">
            <checkbox id="read" value="学习" />学习
          </label>
          <label class="checkbox-item" for="write">
            <checkbox id="write" value="体育" />体育
          </label>
          <label class="checkbox-item" for="music">
            <checkbox id="music" value="艺术" />艺术
          </label>
        </checkbox-group>
      </view>

      <!-- 年龄滑块项 -->
      <view class="uni-form-item uni-column">
        <view class="title">年龄</view>
        <slider value="20" name="age" show-value />
      </view>

      <!-- 保留选项开关项 -->
      <view class="uni-form-item uni-column">
        <view class="title">保留选项</view>
        <label class="switch-item" for="keep">
          <switch id="keep" name="keep" />
        </label>
      </view>

      <!-- 提交和重置按钮 -->
      <view class="btn-group">
        <button form-type="submit" type="primary">Submit</button>
        <button type="default" form-type="reset">Reset</button>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  methods: {
    formSubmit(e) {
      console.log('表单提交数据：', e.detail.value);
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      });
    },
    formReset() {
      console.log('表单已重置');
      uni.showToast({
        title: '表单重置',
        icon: 'none'
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.uni-form-item {
  margin-bottom: 20px;
}
.title {
  font-weight: bold;
  margin-bottom: 10px;
}
.uni-input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.radio-item, .checkbox-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.slider {
  width: 100%;
}
.switch-item {
  display: flex;
  align-items: center;
}
.btn-group {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
</style>
